<template>
  <el-card header="风险预警处理" style="width: 1400px; margin: 0 auto">
    <template #header>
      <div class="header">
        <el-icon class="icon" size="20" @click="goBack"><ArrowLeft /></el-icon>
        <span>查看</span>
      </div>
    </template>
    <div class="card">
      <div class="title">风险预警详情</div>
      <div class="content">
        <el-row :gutter="20" style="padding-top: 30px">
          <el-col :span="10">
            <div class="info">
              <div class="info-label">来源</div>
              <div class="info-input">{{ getSource(detailInfo.source) }}</div>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="info">
              <div class="info-label" style="width: 144px">社会组织名称</div>
              <div class="info-input">{{ detailInfo.riskName || '' }}</div>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="info">
              <div class="info-label">风险类别</div>
              <div class="info-input">{{ detailInfo.riskType || '' }}</div>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="info">
              <div class="info-label" style="width: 144px">
                是否转入协同治理
              </div>
              <div class="info-input">
                {{ detailInfo.state === 2 ? '是' : '否' }}
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info">
              <div class="info-label">佐证材料</div>
              <div class="info-input">
                <PreviewFile :tableData="detailInfo.file" />
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info">
              <div class="info-label">
                <span style="color: #ff0000">*</span>风险详情
              </div>
              <div class="info-input">
                {{ detailInfo.riskDetail || '' }}
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info">
              <div class="info-label">整改要求</div>
              <div class="info-input">
                {{ detailInfo.rect || '' }}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="title">风险预警处理</div>
      <div class="content">
        <el-row :gutter="20" style="padding-top: 30px">
          <el-col :span="24">
            <div class="info">
              <div class="info-label">处理情况</div>
              <div class="info-input">
                <el-input
                  v-model="form.handleSituationl"
                  :rows="2"
                  type="textarea"
                  placeholder="请输入处理情况"
                  input-style="height: 400px"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info">
              <div class="info-label">佐证材料</div>
              <div class="info-input">
                <MBackingMaterial
                  v-model="form.files"
                  dateFormat="YYYY-MM-DD HH:mm"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="btns">
      <el-button type="primary" @click="sure(0)"> 存为草稿 </el-button>
      <el-button type="primary" @click="sure(1)"> 确定 </el-button>
      <el-button @click="goBack">取消</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import {
  msgDetail,
  riskDetail,
  soptCheckDetail,
  riskHandle,
  riskChange
} from '@/api/spotCheck/spotCheck'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import { dateFormat } from '@/utils'
import PreviewFile from '@/views/spotCheck/components/previewFile/previewFile.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

const route = useRoute()
const detailInfo = ref('')
const loading = ref(false)
onMounted(() => {
  loading.value = true
  riskDetail({ sorgRiskId: route.query.id })
    .then((res) => {
      detailInfo.value = res.data
      form.handleSituationl = res.data.handleSituationl
      if (
        Array.isArray(res.data.handleFile) &&
        res.data.handleFile.length > 0
      ) {
        form.files = res.data.handleFile.map((i) => ({
          fileSum: i.filePage,
          isSave: true,
          name: i.fileName,
          createdAt: dateFormat(i.createTime, 'YYYY-MM-DD'),
          time: i.createTime,
          timestamp: i.createTime,
          isAdd: true,
          file: [
            {
              name: i.fileName,
              status: 'success',
              url: i.fileUrl
            }
          ]
        }))
      } else {
        form.files = []
      }
    })
    .finally(() => {
      loading.value = false
    })
})

//返回
const goBack = () => {
  router.go(-1)
}

const getSource = (v) => {
  let name = ''
  try {
    name = [
      '数据比对',
      '年度检查',
      '抽查检查',
      '审计巡视巡查',
      '网络舆情',
      '其他'
    ][v - 1]
  } catch (e) {}
  return name
}

const form = reactive({
  files: [],
  handleSituationl: ''
})

const laodingForm = ref(false)
const sure = (saveFlag) => {
  ElMessageBox.confirm(
    saveFlag === 0 ? '请确认是否存为草稿？' : '是否进行确认？',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      laodingForm.value = true
      let files = form.files
        .filter((i) => i.isSave)
        .map((i) => {
          let file = {
            fileName: i.name,
            filePage: i.fileSum,
            fileUrl: '',
            createTime: i?.isAdd ? i.time : i.timestamp
          }
          if (Array.isArray(i.file) && i.file.length > 0) {
            //上传了文件
            file.fileName = i.name
            file.fileUrl = i.file[0].url
          }
          return file
        })

      let data = {
        handleSituationl: form.handleSituationl,
        files,
        saveFlag,
        sorgRiskId: route.query.id
      }
      riskHandle(data)
        .then((res) => {
          ElMessage.success(saveFlag === 0 ? '保存成功' : '提交成功')
          goBack()
        })
        .finally(() => {
          laodingForm.value = false
        })
    })
    .catch(() => {})
}
</script>

<style scoped lang="scss">
.info {
  display: flex;
  margin-bottom: 30px;
  .info-label {
    width: 108px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 300;
    font-size: 18px;
    color: #666666;
    margin-right: 20px;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    height: 30px;
  }
  .info-input {
    flex: 1;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 18px;
    color: #333333;
    line-height: 30px;
    min-width: 0;
  }
}

.upload {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.uploadListTable {
  border: 1px solid #e9e9e9;
}

:deep(.uploadListTable th) {
  background: #f5f6f8;
  font-weight: 300;
  font-size: 16px;
  color: #333333;
  height: 38px;
}
.title {
  font-weight: 500;
  font-size: 18px;
  color: #333333;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9e9e9;
  padding-left: 20px;
}
:deep(.el-card__body) {
  padding: 20px 0;
}
.card {
  box-sizing: border-box;
}
.content {
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 20px 0;
  border-top: 1px solid #e9e9e9;
}
.select {
  width: 480px;
}
:deep(.el-card__body) {
  padding: 20px 0;
}
.header {
  display: flex;
  align-items: center;
  .icon {
    margin-right: 16px;
    cursor: pointer;
  }
  span {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
  }
}
</style>
